.cl-view-window {
  box-sizing: border-box;

  &__content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px -3px var(--info-color);
    border-radius: 10px;
    &-hide-view {
      box-sizing: border-box;
      background-color: #f3f3f3;
      transition: height 300ms;
      overflow: hidden;
    }
    &-btns {
      box-shadow: 0 0 10px -5px var(--info-color);
      transition: background-color 300ms, color 300ms;
      color: var(--info-color);
      &:hover {
        background-color: #f7f7f7;
        color: var(--primary-color);
      }
      .btn-text {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        gap: 10px;
        i{
          font-size: 20px;
        }
        span {
          position: relative;
          transform: translateX(100%);
          opacity: 0;
          overflow: hidden;
          max-width: 0;
          transition: max-width 300ms, transform 300ms, opacity 300ms;
        }
      }
    }
    &:hover {
      .btn-text {
        span {
          width: max-content;
          opacity: 1;
          max-width: 300px;
          transform: translateX(0);
        }
      }
    }
  }
}
